<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>综合服务系统</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css">
    <link rel="stylesheet" href="${re.contextPath}/plugin/css/khd.css">

    <style>

    </style>
</head>

<body>

<div class="container">
    <div class="titlePic">
        <img src="${re.contextPath}/plugin/common/images/hb.png" alt="">
    </div>
    <#--考试任务-->
    <div class="task">
        <div class="title">
            <img src="${re.contextPath}/plugin/common/images/rw.png" alt="" style="width: 20px;height: 20px">
            <p style="margin-left: 10px;font-size: 18px">考试任务</p>
        </div>
        <div class="category">
            <div id="kstab" onclick="ksclick()" style="color: rgb(62,124,231);">正式考试</div>
            <div id="lxtab" onclick="lxclick()" style="text-align: center">练习</div>
            <div id="jgtab" onclick="jgclick()" style="text-align: right">考试结果</div>
        </div>
        <#--	正式考试-->
        <div id="ks" class="kscontent">
            <div style="overflow: hidden">
                <#list zs as vo>
                    <div class="info">
                        <img src="${vo.url}" alt="" style="width: 100%;height: 40%">
                        <p class="courseTitle">${vo.examName}</p>
                        <p class="time">${vo.startTime} | ${vo.totalTime}分钟 | ${vo.passScore}分为合格</p>
                        <div style="font-size: 14px;display: flex;justify-content: space-between">
                            <input type="hidden" value="${vo.examId}">
                            <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center;margin: 0 auto;"
                               onclick="starts(this)">开始考试</p>
                        </div>
                    </div>
                </#list>
            </div>
            <div id="ks_pagination" style="width: 100%;text-align: center;"></div>
        </div>

        <#---->
        <#--	练习-->
        <div id="lx" class="kscontent">
            <div style="overflow: hidden">
                <#list cs as vo>
                    <div class="info">
                        <img src="${vo.url}" alt="" style="width: 80%;height: 40%">
                        <p class="courseTitle">${vo.examName}</p>
                        <p class="time">${vo.startTime}| ${vo.totalTime} | ${vo.passScore}分为合格</p>
                        <div style="font-size: 14px;display: flex;justify-content: space-between">
                            <input type="hidden" value="${vo.examId}">
                            <p style="width: 80px;height: 36px;border-radius: 50px;background-color: #3e7ce7;color: #fff;line-height: 36px;text-align: center"
                               onclick="starts(this)">
                                开始考试</p>
                        </div>
                    </div>
                </#list>
            </div>
            <div id="lx_pagination" style="width: 100%;text-align: center;"></div>
        </div>
        <#---->
        <#--	考试结果-->
        <div id="jg" class="textResult">
            <table id="result_list" class="layui-hide" lay-filter="result_list"></table>
        </div>
    </div>
</div>

</body>

<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="toolBarRow">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit" style="margin-left: 0;">查看详情</a>
</script>
<script>
    let layer;
    let table;
    layui.use(['element', 'laydate', 'layer', 'table', 'laypage'], function () {
        let laypage = layui.laypage;
        layer = layui.layer;
        table = layui.table;
        if (${zs?size} <= 4) {
            document.getElementById('ks_pagination').style.display = 'none';
        } else {
            laypage.render({
                elem: 'ks_pagination',
                count: ${zs?size},
                limitL: 4,
            });
        }


        if (${cs?size} <= 4) {
            document.getElementById('lx_pagination').style.display = 'none';
        } else {
            laypage.render({
                elem: 'lx_pagination',
                count: ${cs?size},
                limitL: 4,
            });
        }

        table.render({
            id: 'result_list',
            elem: "#result_list",
            url: '/synthesize/selectExamResult',
            page: true,
            cols: [[
                {
                    title: '序号', width: '25%', unresize: true, templet: function (res) {
                        return res.LAY_INDEX;
                    }
                },
                {field: 'stuExamId', title: 'ID', hide: true, unresize: true, sort: false},
                {field: 'examName', width: '25%', title: '考试名称', unresize: true,},
                {field: 'startTime', width: '25%', title: '作答时间', unresize: true,},
                {field: 'remark', width: '25%', title: '操作', toolbar: '#toolBarRow', unresize: true,}
            ]],
        })

        table.on('tool(result_list)', function (res) {
            let data = res.data;
            if (res.event === 'edit') {
                window.open("/exam/client/ExamDetails?stuExamId=" + data.stuExamId);
            }

        })
    })

    let ks = $('#ks');
    let kstab = $('#kstab');
    let lx = $('#lx');
    let lxtab =$('#lxtab');
    let jg = $('#jg');
    let jgtab = $('#jgtab');

    $(function () {
        lx.hide();
        jg.hide();
    })

    //开始考试
    function starts(obj) {
        let examId = $(obj).parent('div').find('input').val();
        // var type = "auto";
        let w = "70%";
        let h = "90%";
        let url = "/exam/client/prompt?examId=" + examId;
        layer.open({
            id: 'form-add',
            type: 2,
            area: [w, h],
            fix: false,
            maxmin: true,
            shadeClose: false,
            shade: 0.4,
            title: "温馨提示",
            content: url,
            end: function () {
                // tableIns.reload();
            }
        });
    }


    //正式考试
    function ksclick() {
        ks.show();
        kstab.css('color', 'rgb(62,124,231)');
        // kstab.css('border-bottom', '2px solid rgb(62,124,231)');
        lx.hide();
        lxtab.css('color', '#000000');
        jg.hide();
        jgtab.css('color', '#000000');
    }

    //练习考试
    function lxclick() {
        ks.hide();
        kstab.css('color', '#000000');
        lx.show();
        lxtab.css('color', 'rgb(62,124,231)');
        jg.hide();
        jgtab.css('color', '#000000');
    }

    //考试结果
    function jgclick() {
        ks.hide();
        kstab.css('color', '#000000');
        lx.hide();
        lxtab.css('color', '#000000');
        jg.show();
        jgtab.css('color', 'rgb(62,124,231)');
    }
</script>

</html>



